/* 颜色 */
:root {
    /* 标准蓝 */
    --StandardBlue: rgba(64, 96, 255, 1);
    /* 透明蓝 */
    --TransparentBlue: rgba(64, 96, 255, 0.8);
    /* 阴影蓝 */
    --ShadowBlue: rgba(207, 215, 255, 1);
    /* 背景深蓝 */
    --BackgroundDeepBlue: rgba(209, 217, 255, 1);
    /* 背景蓝 */
    --BackgroundBlue: rgba(239, 242, 255, 1);
    /* 标准白 */
    --StandardWhite: rgba(255, 255, 255, 1);
    /* 图标白 */
    --iconWhite: rgba(245, 245, 245, 1);
    /* 标准黑 */
    --StandardBlack: rgba(0, 0, 0, 1);
    /* 字体黑 */
    --FontBlack: rgba(30, 32, 34, 1);
    /* 字体浅黑 */
    --FontLightBlack: rgba(119, 131, 143, 1);
    /* 阴影黑 */
    --ShadowBlack: rgba(0, 0, 0, 0.2);
    /* 标准绿 */
    --StandarGreen: rgba(48, 209, 88, 1);
}

* {
    caret-color: transparent;
}

body {
    background-color: var(--BackgroundBlue, rgba(239, 242, 255, 1));
    margin: 0;
    position: relative;
}

.main {
    width: 100%;
    height: 100%;
}

/* 头部 */
.Head {
    z-index: 999;
    position: fixed;
    top: 0;
}

/* 导航栏 */
.Guide {
    position: fixed;
    bottom: 0;
}

/* 垫块 */
.cushionUp {
    flex-shrink: 0;
    display: inline-block;
    --controlLen: 414;
    width: calc(var(--controlLen, 414) * 1px);
    height: calc(var(--controlLen, 414) * 0.21 * 1px);
}

/* 页面窗口 */
.PageWindow {
    width: 100%;
    overflow: hidden;
}

/* 页面列表 */
.pageList {
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    /* 隐藏滑动条 */
    scrollbar-width: none; /* firefox */
}

/* 页面 */
.pageBox {
    display: flex;
    flex-shrink: 0;
    /* 垂直排列 */
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-y: scroll;
    scroll-snap-align: center;

    /* 隐藏滑动条 */
    overflow-x: hidden;
    scrollbar-width: none; /* firefox */
}

.pageBox::-webkit-scrollbar,
.pageList::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
